<template>
  <div
    class="edu-avatar"
    :class="[`edu-avatar--${shape}`, sizeClass]"
    :style="[wrapStyle]"
    @click="onClick"
  >
    <el-avatar
      :size="size"
      :icon="icon"
      :shape="shape"
      :src="src"
      :fit="fit"
      @error="$util.isDef(src)"
    >
      <img class="avatar-default" src="@/assets/images/public/avatar-placehoder.png" />
    </el-avatar>

    <!-- 等级图标 -->
    <template v-if="showLevel">
      <slot v-if="$slots.level" name="level" />
      <div v-else class="edu-avatar__level">
        <img :style="levelIconStyle" :src="levelIcon" class="icon-level" />
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    // 图片头像的资源地址
    src: {
      type: String,
      default: ''
    },
    // 设置头像的大小
    size: {
      type: [String, Number],
      default: 'large'
    },
    // 设置头像的图标类型，参考 Icon 组件
    icon: {
      type: String,
      default: ''
    },
    // 设置头像的形状
    shape: {
      type: String,
      default: 'circle'
    },
    // 当展示类型为图片的时候，设置图片如何适应容器框
    fit: {
      type: String,
      default: 'cover'
    },
    // 光标
    cursor: {
      type: String,
      default: 'pointer'
    },
    // 是否显示等级图标
    showLevel: {
      type: Boolean,
      default: false
    },
    // 右下角的等级图片
    levelIcon: {
      type: String,
      default: require('@/assets/images/public/headphoto_vip_icon.png')
    },
    // 右下角的等级的大小
    levelIconSize: {
      type: [String, Number],
      default: 30
    }
  },
  computed: {
    wrapStyle() {
      let style = {}
      style.cursor = this.cursor

      return style
    },
    sizeClass() {
      if (this.$util.inArray(this.size, ['large', 'medium', 'small'])) {
        return `edu-avatar--${this.size}`
      }
      return ''
    },
    levelIconStyle() {
      let style = {}
      style.cursor = this.cursor
      if (this.$util.number(this.levelIconSize)) {
        style.width = this.levelIconSize + 'px'
        style.height = this.levelIconSize + 'px'
      } else if (this.levelIconSize) {
        style.width = this.levelIconSize
        style.height = this.levelIconSize
      }
      return style
    }
  },
  methods: {
    // 点击
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.edu-avatar {
  display: flex;
  position: relative;
  .avatar-default {
    width: 100%;
    height: 100%;
  }
  &__level {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 2px solid #fadbb0;
    box-sizing: border-box;
    .icon-level {
      position: absolute;
      bottom: -2px;
      right: -2px;
    }
  }
  &.edu-avatar--circle {
    border-radius: 50%;
    .edu-avatar__level {
      border-radius: 50%;
    }
  }
  &.edu-avatar--square {
    border-radius: 4px;
    .edu-avatar__level {
      border-radius: 4px;
    }
  }
  &.edu-avatar--large {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  &.edu-avatar--medium {
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
  &.edu-avatar--small {
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
}
</style>
